<template>
    <!-- 登录页面 -->
    <div class="wrapper">
      <div id="building">
        <el-form ref="form" :model="form" :rules="rules" class="login-box">
          <h3 class="login-title">欢迎登陆</h3>
          <el-form-item label="账户" prop="account">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { login } from "@/api/user";
  export default {
    data() {
      return {
        form: {
          account: "admin",
          password: "123",
        },
        rules: {
          account: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          password: [
            { required: true, message: "请选择密码", trigger: "change" },
          ],
        },
      };
    },
    methods: {
      //点击进行登录
      submitForm(formName) {
        const userRole = "user";
        const userRole1 = "doctorname";
        const userRole2 = "Registrar";
  
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
          }
        });
      },
    },
  };
  </script>
  
  <style>
  .login-box {
    width: 350px;
    margin: 120px auto;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 2px, 5px, 16px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 5px;
  }
  .login-title {
    text-align: center;
  }
  .wrapper {
    height: 100%;
    
    width: 100%;
    position: fixed;
    background-size: 100% 100%;
  }
  </style>
  